<template>
  <!-- <van-nav-bar safe-area-inset-top /> -->
  <div>
    <Header v-show="false" :left="false" title="首页" />
    <!-- <meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
    <van-nav-bar safe-area-inset-top /> -->
    <Tabbar v-model="tabActive" active-color="#138087" inactive-color="#000" id="tabbar" @change="changeTab" fixed>
      <TabbarItem icon="wap-home" style="font-size:15px;">主页</TabbarItem>
      <TabbarItem icon="column" style="font-size:15px;">报表</TabbarItem>
      <TabbarItem icon="manager" style="font-size:15px;">我的</TabbarItem>
    </Tabbar>
    <!-- <van-number-keyboard safe-area-inset-bottom /> -->
  </div>
  <!-- <van-number-keyboard safe-area-inset-bottom /> -->
</template>

<script>
import Header from "@/components/header.vue";
import apicloud from "@/libs/apicloud";
import { getToken } from "@/libs/auth";
import { Tabbar, TabbarItem } from "vant";
export default {
  name: "home",
  components: { Header, Tabbar, TabbarItem },
  data() {
    return {
      tabActive: 0
    };
  },
  created() {
    var talkingD = api.require("talkingData");
    talkingD.init();
    //双击返回键退出APP(only for android)
    var ci = 0;
    var time1, time2;
    this.$ac.addEventListener(
      {
        name: "keyback"
      },
      function (ret, err) {
        if (ci == 0) {
          time1 = new Date().getTime();
          ci = 1;
          api.toast({
            msg: "再按一次返回键退出"
          });
        } else if (ci == 1) {
          time2 = new Date().getTime();
          if (time2 - time1 < 3000) {
            api.closeWidget({
              id: api.appId,
              retData: {
                name: "closeWidget"
              },
              silent: true
            });
          } else {
            ci = 0;
            api.toast({
              msg: "再按一次返回键退出"
            });
          }
        }
      }
    );
    // let tkn = getToken();
    // if (!tkn) {
    //   api.openWin({
    //     name: "login",
    //     url: "./login-login.html",
    //     rect: {
    //       x: 0,
    //       y: 150,
    //       w: api.winWidth,
    //       h: api.winHeight
    //     }
    //   });
    // }
  },
  mounted() {
    let navHeight = apicloud.dom("#nav").offsetHeight;
    let frameHeight = 0;
    // if (api.systemType == 'ios') {
    //   frameHeight =
    //     this.$ac.winHeight -
    //     apicloud.dom("#tabbar").offsetHeight -
    //     apicloud.dom("#nav").offsetHeight + 15;
    // }
    // else {
    frameHeight =
      this.$ac.winHeight -
      apicloud.dom("#tabbar").offsetHeight -
      apicloud.dom("#nav").offsetHeight;
    // }
    //alert(frameHeight);
    // 设置frame group
    this.$ac.openFrameGroup(
      {
        name: "homeTabs",
        scrollEnabled: true,
        rect: {
          x: 0,
          y: navHeight + 0.1,
          w: "auto",
          h: frameHeight
        },
        index: 0,
        useWKWebView: true,
        historyGestureEnabled: true,
        frames: [
          {
            name: "tab1",
            url: "./tabs-tab1.html"// sub diretory file format: ./[subdir]-[subdir]-[filename].html
          },
          {
            name: "tab2",
            url: "./tabs-tab2.html",
            bounces: true
          },
          {
            name: "tab3",
            url: "./tabs-tab3.html"
          }
        ]
      },
      (ret, err) => {
        // You must use arrow function that can been used 'THIS'
        this.tabActive = ret.index;
      }
    );
  },
  methods: {

    changeTab(index) {
      console.info(`select tab: ${index}`); // Must be use `` to log
      this.$ac.setFrameGroupIndex({
        name: "homeTabs",
        index,
        scroll: true,
        reload: true
      });
    }
  }
};
</script>

<style scoped>
#tabbar {
  position: fixed;
}

.van-nav-bar {
  width: 100%;
  position: sticky;
  top: 0;
}

/* iphone x / xs / 11 pro*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .ios {
    .van-nav-bar {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-top: 40px;
    }
  }
}

/* iphone xr / 11 */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  .ios {
    .van-nav-bar {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-top: 40px;
    }
  }
}

/* iphone xs max / 11 pro max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .ios {
    .van-nav-bar {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-top: 40px;
    }
  }
}

/* iphone 12 pro */
@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) {
  .ios {
    .van-nav-bar {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-top: 40px;
    }
  }
}
</style>